<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<link href="js/layui/css/layui.css" rel="stylesheet" type="text/css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/layui/layui.all.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="js/layui/css/style.css"/>
<body>
<table class="layui-hide" id = "menu" lay-filter="menu"></table>
</body>
<style type="text/css">
    .layui-form-item{
        margin: 20px 100px 10px 45px;
    }
</style>


<form class="layui-form" style="display: none" method="post" id="detail" lay-filter="stuform" style="margin-bottom: 20px;">
    <div class="layui-form-item">
        <label class="layui-form-label">名称：</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="title" value="" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">地址：</label>
        <div class="layui-input-block">
            <input type="text" name="url" id="menu_url" value="" class="layui-input" />
        </div>
    </div>
</form>
<form class="layui-form" style="display: none" method="post" id="formTest" lay-filter="stuform1" style="margin-bottom: 20px;">
    <div class="layui-form-item" style="display: none">
        <label class="layui-form-label">名称：</label>
        <div class="layui-input-block">
            <input type="text" name="id" id="id" value="" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">名称：</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" value="" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">地址：</label>
        <div class="layui-input-block">
            <input type="text" name="url" id="url" name="url" value="" class="layui-input" />
        </div>
    </div>
    <div class="layui-form-item" >
        <label class="layui-form-label">父模块：</label>
        <div class="layui-input-block">
            <select name="pid" id="pid" lay-verify="required">
                <option value="0"></option>
            </select>
        </div>
    </div>
</form>
<script type="text/javascript">
    form = layui.form;
    form.render('select');
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-sm" lay-event="add_lay"><i class="layui-icon">&#xe654;</i>新增</button>
        <button class="layui-btn layui-btn-sm" lay-event="updata_lay"><i class="layui-icon">&#xe642;</i>修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="delete_lay"><i class="layui-icon">&#xe640;</i>删除</button>
        <button class="layui-btn layui-btn-sm" lay-event="refresh_lay"><i class="layui-icon">&#xe666;</i>刷新</button>
    </div>
</script>
<style>
    .layui-table-cell{
        display:table-cell;
        vertical-align: middle;
    }
</style>
<script src="js/loginjs/cunchu.js"></script>
<script type="text/javascript">
    URL="http://localhost:8601/";
    var token= localStorage.getExpire("token");
    layui.config({
        base : '../adview/js/layui/treetable-lay/'
    });/*.extend({
        treetable : '../treetable-lay/treetable',
    });*/
    layui.use(['treetable', 'table', 'layer'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var treetable = layui.treetable;
        //渲染表格
        var renderTable = function(){
            layer.load(2);
            treetable.render({
                xhrFields: {
                    withCredentials: true
                },
                headers:{"Authorization":token},
                id:'menu',
                treeColIndex: 1,	//树形图标显示在第几列
                treeSpid: '0',		//最上级的父级id
                treeIdName: 'id',	//id字段的名称
                treePidName: 'pid',	//pid字段的名称，父级菜单id
                treeDefaultClose: true,	//是否默认折叠
                treeLinkage: false,		//父级展开时是否自动展开所有子级
                elem: '#menu',	//表格id
                url: URL+'getTreeTable',
                toolbar: '#toolbarDemo',
                page: false,
                cols: [[
                    {type:'checkbox'},
                    {field: 'name', title: '模块名'},
                    {field: 'id', title: '模块编号'},
                    {field: 'pid', title: '父模块编号'},
                    {field: 'url', title: '模块路径'}
                ]],
                //数据渲染完的回调
                done: function () {
                    //关闭加载
                    layer.closeAll('loading');
                }
            })
        };
        renderTable();
        table.on('toolbar', function(obj){
            var checkStatus = table.checkStatus('menu');
            var data = checkStatus.data;
            if(obj.event === 'add_lay'){
                if(data.length > 1 || data.length < 1){
                    layer.msg("请选择一行作为父级菜单",{offset:'rb'});
                }else{
                    var id = data.length==1?data[0].id: '';
                    layer.open({
                        type: 1,
                        title: '新增',
                        area: ['350px', '400px'],
                        content: $('#detail'),
                        btn: ['提交', '退出'],
                        yes:function (layero,index) {
                            var menu_name=$("#title").val();
                            var menu_url=$("#menu_url").val();
                            $.ajax({
                                xhrFields: {
                                    withCredentials: true
                                },
                                headers:{"Authorization":token},
                                url:URL+"saveTreeTable",
                                data:{menu_menuId: id,menu_name:menu_name,menu_url:menu_url},
                                dataType: 'json',
                                type: 'post',
                                success: function (data) {
                                    if(data==1){
                                        layer.msg('成功200', {
                                            time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                        }, function () {
                                            window.parent.location.reload();
                                        })
                                    }else{
                                        layer.msg(data.msg, {time: 3000});
                                    }
                                }
                            })
                        }, btn2: function (index, layero) {
                            layer.msg("关闭成功");
                           // return false //开启该代码可禁止点击该按钮关闭
                        }
                    });
                }
            }else if(obj.event === "updata_lay"){
                if(data.length != 1){
                    layer.msg("请选择一行进行编辑",{offset:'rb'});
                }else{
                    getBuilding(data[0].pid);
                    layer.open({
                        type: 1,
                        title: '修改',
                        maxmin: true, //允许全屏最小化
                        anim: 1, //0-6的动画形式，-1不开启
                        area: ['530px', '350px'],
                        content: $("#formTest"),
                        btn: ['提交', '退出'],
                        success: function(layero,index){
                            //在回调方法中的第2个参数“index”表示的是当前弹窗的索引。
                            //通过layer.full方法将窗口放大。
                            layer.full(index);
                        },
                        yes:function(layero,index){
                                var menu_id=$("#id").val();
                                var menu_name=$("#name").val();
                                var menu_url=$("#url").val();
                                var menu_menuId=$("#pid").val();
                                $.ajax({
                                    xhrFields: {
                                        withCredentials: true
                                    },
                                    headers:{"Authorization":token},
                                    url:URL+"updateTreeTable",
                                    data:{menu_id: menu_id,menu_name:menu_name,menu_url:menu_url,menu_menuId:menu_menuId},
                                    dataType: 'json',
                                    type: 'post',
                                    success: function (data) {
                                        if(data==1){
                                            layer.msg('成功200', {
                                                time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                            }, function () {
                                                window.parent.location.reload();
                                            })
                                        }else{
                                            layer.msg(data.msg, {time: 3000});
                                        }
                                    }
                                })
                        },
                        btn2: function (index, layero) {
                            layer.msg("关闭成功");
                            // return false //开启该代码可禁止点击该按钮关闭
                        }
                    })
                    form.val('stuform1', data[0]);
                }
            }else if(obj.event === "delete_lay"){
                if(data.length != 1) {
                    layer.msg("请选择一行进行删除", {offset: 'rb'});
                }else{
                    var id = data[0].id;
                    layer.confirm('真的删除选定行的数据吗?', function(index){
                        $.ajax({
                            xhrFields: {
                                withCredentials: true
                            },
                            headers:{"Authorization":token},
                            url:URL+"deleteTreeTable",
                            data:{id: id},
                            dataType: 'json',
                            type: 'post',
                            success: function (data) {
                                if(data==1){
                                    layer.msg('成功200', {
                                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                                    }, function () {
                                        window.parent.location.reload();
                                    })
                                }else{
                                    layer.msg(data.msg, {time: 3000});
                                }
                            }
                        })
                    });
                }
            }else if(obj.event === "refresh_lay"){
                renderTable();
            }
        })
    })
    function getBuilding(menu_menuId) {
        console.log(menu_menuId);
        $.ajax({
            xhrFields: {
                withCredentials: true
            },
            headers:{"Authorization":token},
            url: URL+"getTreeTable",
            dataType: 'json',
            type: 'post',
            success: function (data) {
                var strhtml = "<option></option>";
                $.each(data.data, function (index, item) {
                    if (item.pid == menu_menuId) {
                        strhtml += "<option selected value='" + item.id + "'>" + item.name + "</option>"
                    }else{
                        strhtml += "<option value='" + item.id  + "'>" + item.name + "</option>"
                    }
                    //$('#buildId').append(new Option(item.level_name,item.level_id));// 下拉菜单里添加元素
                });
                if(menu_menuId==0){
                    strhtml += "<option selected value='" + 0 + "'>" + '无父模块' + "</option>"
                }
                $("#pid").html(strhtml);
                layui.form.render("select");//重新渲染 固定写法
            }
        });
    };
</script>

</html>